<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>water</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            display:flex;
            width: 100vw;;
            height: 100vw;
            background-color:#3498db;
            justify-content:space-around;


        }
        .water{
         position:relative;
            margin-top: 20vh;
            width: 300px;
            height: 300px;
            border-radius: 53% 47% 32% 68% / 33% 34% 66% 67%  ;
            box-shadow:inset 10px  20px 30px rgba(0,0,0,0.5),
                             -10px -10px 20px  rgba(0,0,0,0.5),
            inset -10px -10px 15px rgba(255,255,255,0.7);

         animation:action 3s linear infinite alternate;
        }

 .water::before{
            content:"";
            width: 10px;
            height: 10px;
            position:absolute;
            top: 60px;
            left: 30%;
            background-color: rgba(255,255,255,0.8);
            border-radius: 5px ;
        }
 @keyframes action {
     25%{
         width: 300px;
            height: 300px;
            border-radius:53% 47% 63% 37% / 33% 34% 66% 67% ;
            box-shadow:inset 10px  20px 30px rgba(0,0,0,0.5),
                             -10px -10px 20px  rgba(0,0,0,0.5),
            inset -10px -10px 15px rgba(255,255,255,0.7);

     }
        50%{
 width: 300px;
            height: 300px;
            border-radius: 53% 47% 63% 37% / 14% 34% 66% 86%  ;
            box-shadow:inset 10px  20px 30px rgba(0,0,0,0.5),
                             -10px -10px 20px  rgba(0,0,0,0.5),
            inset -10px -10px 15px rgba(255,255,255,0.7);

     }
        75%{
 width: 300px;
            height: 300px;
            border-radius:79% 21% 63% 37% / 14% 34% 66% 86%  ;
            box-shadow:inset 10px  20px 30px rgba(0,0,0,0.5),
                             -10px -10px 20px  rgba(0,0,0,0.5),
            inset -10px -10px 15px rgba(255,255,255,0.7);

     }
        100%{
 width: 300px;
            height: 300px;
            border-radius: 79% 21% 63% 37% / 14% 72% 28% 86%  ;
            box-shadow:inset 10px  20px 30px rgba(0,0,0,0.5),
                             -10px -10px 20px  rgba(0,0,0,0.5),
            inset -10px -10px 15px rgba(255,255,255,0.7);

     }
 }

    </style>
</head>
<body>
<div class="water"></div>
   <span style="color:red; font-size:55px;font-weight: 900;text-shadow: 10px 10px 10px black ">hello world</span>
</body>
</html>